<!--
 * @Descripttion: 
 * @Author: Wang Dejiang(aei)
 * @Date: 2022-04-12 19:49:53
 * @LastEditors: Wang Dejiang(aei)
 * @LastEditTime: 2022-04-26 00:35:20
-->
<template>
  <div class="container">
    <div class="main">
      <img
        class="icon"
        src="../assets/image/zxjs.png"
        loading="lazy"
        alt="zxjs图标"
      />
      <div class="terminal">
        <div class="bar">
          <div class="barBtn"></div>
        </div>
        <div class="bash">
          user@unbuntu-mechine:~$ ls <br />
          <span
            style="display: inline-block; padding: 5px 0 10px 0; color: #ffda1c"
            >a.js &nbsp; b.js &nbsp; ls.js</span
          ><br />
          user@unbuntu-mechine:~$ zx ./ls.js <br />
          <span
            style="display: inline-block; padding: 5px 0 10px 0; color: #ffda1c"
            >a.js &nbsp; b.js &nbsp; ls.js</span
          ><br />
          user@unbuntu-mechine:~$
          <span class="pulse">_</span>
        </div>
      </div>
    </div>
    <div class="titles">
      <div class="titleCn">
        <span class="titleCnTxt"> Bash是很酷，不过也来试试JavaScript吧 </span
        ><el-button
          color="#2f3338"
          size="large"
          round
          style="font-size: 2rem; color: #ffda1c"
          class="css2ee6d91c7e23365"
          @click="goGuide"
          >起步</el-button
        >
      </div>
      <span class="title">
        Bash is great, but when it comes to writing scripts, people usually
        choose a more convenient programming language.
      </span>
    </div>
    <!-- <FooterBar /> -->
  </div>
</template>

<script lang="ts" setup>
import FooterBar from '../components/FooterBar.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goGuide = () => {
  console.log('xxx')
  router.push({
    path: '/guide',
  })
}
</script>

<style lang="less">
.container {
  position: relative;
  // height: 100vh;
  min-height: 100vh;
  background-color: #45474b;
  overflow-y: scroll;
  padding: 14vh 0 0 0;
  display: flex;
  flex-direction: column;
}
.titles {
  margin: 12vh 0 5vh 0;
  width: 100vw;
  .title {
    background-color: #ffda1c;
    max-width: 90vw;
    color: #232323;
    padding: 10px 20px;
    border-radius: 40px;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Gotham';
    // font-family: 'Bauhaus-Bold';
  }
  .titleCn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .titleCnTxt {
    color: #ffda1c;
    display: inline-block;
    font-size: 2.5rem;
    font-family: 'jdxiyuanjian2ee0a9f22323365';
    font-weight: 600;
    margin-right: 20px;
  }
}
.terminal {
  background-color: #232323;
  font-size: 1.8rem;
  border-radius: 15px;
  text-align: start;
  overflow: hidden;
  height: 360px;
  .bash {
    font-family: 'Gotham';
    font-weight: 650;
    margin-top: 10px;
    margin-left: 20px;
    color: #3fb14c;
  }
  .bar {
    position: relative;
    height: 40px;
    background-color: #191919;
    .barBtn {
      position: absolute;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background-color: #f8d008;
      top: 10px;
      right: 20px;
    }
  }
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 576px) {
  .container {
    padding-top: 140px;
  }
  .icon {
    width: 180px;
  }
  .terminal {
    width: 270px;
    height: 200px;
    margin-top: 40px;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .titles {
    margin-top: 40px;
    .titleCn {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .titleCnTxt {
      margin-bottom: 20px;
    }
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .container {
    padding-top: 160px;
  }
  .icon {
    width: 300px;
  }
  .terminal {
    width: 450px;
    height: 250px;
    margin-top: 40px;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .titles {
    margin-top: 40px;
    .titleCn {
      flex-direction: column;
      .titleCnTxt {
        margin-bottom: 20px;
      }
    }
  }
}

@media (min-width: 769px) {
  .icon {
    width: 350px;
  }
  .terminal {
    width: 650px;
    margin-left: 200px;
  }
  .main {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }
}
</style>
